<template>
  <view class="body">
    <image class="img_bg" src="https://ainengli.hzjrsw.com/jkhx/interpretBg.png" />
    <view class="patient">
      <view class="name">{{ userInfo.patName }}</view>
      <view class="num">{{ userInfo.gender }} | {{ userInfo.age + '岁' }}</view>
      <!-- <text @tap="uploadReport" class="upload_btn">上传院外报告</text> -->
    </view>
    <view class="content">
      <view class="tabs">
        <view
          v-for="(item, index) in tabInfo.list"
          :key="index"
          @click="tabChange(item.type)"
          :class="tabInfo.active == item.type ? 'active' : 'tab'"
        >
          <view class="tab_text">{{ item.name }}</view>
        </view>
      </view>
      <view class="list" v-if="reportList && reportList.length > 0">
        <view class="item" v-for="(item, index) in reportList" :key="index" @click="toDetail(item)">
          <image
            v-if="type == 'inspect'"
            class="img_avatar"
            src="https://ainengli.hzjrsw.com/jkhx/report_inspect.png"
          />
          <image
            v-else-if="type == 'check'"
            class="img_avatar"
            src="https://ainengli.hzjrsw.com/jkhx/report_check.png"
          />
          <image
            v-else
            class="img_avatar"
            src="https://ainengli.hzjrsw.com/jkhx/report_physical.png"
          />
          <view class="info">
            <view class="name">
              <text class="name_text">
                {{ type == 'inspect' ? item.testTypeName : item.examItemName }}
              </text>
              <!-- <view v-if="item.out" class="tag">院外</view> -->
            </view>
            <view class="date">
              <text class="date_text"> 报告时间：{{ item.reportTime }} </text>
            </view>
            <image class="img_more" src="@/static/image/raozg/more.png" />
          </view>
        </view>
      </view>
      <view v-else class="nodate">
        <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
        <view class="nodate_text">
          <text class="name">暂无数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import store from '@/store'
import { formatDate } from '@/utils/util'
import { getExamineRecord, getCheckRecord } from '@/api/report'

const type = ref('')
const userInfo = ref({})
const tabInfo = reactive({
  active: 'LAST',
  list: [
    {
      name: '最近一次就诊',
      type: 'LAST'
    },
    {
      name: '近三个月',
      type: 'THREE_MONTHS'
    },
    {
      name: '近一年',
      type: 'ONE_YEAR'
    }
  ]
})
const reportList = ref([])

onLoad((option) => {
  type.value = option.type ? option.type : ''
})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  getList()
})

const getList = () => {
  let params = {
    empi: userInfo.value.empi,
    // empi: '74567895',
    reportTimeEnum: tabInfo.active
  }
  if (type.value == 'inspect') {
    getExamineRecord(params).then((res) => {
      reportList.value = res.data
    })
  } else {
    getCheckRecord(params).then((res) => {
      reportList.value = res.data
    })
  }
}

const tabChange = (e) => {
  tabInfo.active = e
  getList()
}

const uploadReport = () => {
  uni.chooseImage({
    count: 1, //默认9
    success: function (res) {
      uni.showToast({
        title: '上传成功!'
      })
      if (type.value == 'inspect') {
        reportList.value.unshift({
          key: 3,
          num: '3',
          name: '生化检测',
          out: true,
          date: formatDate(new Date().getTime(), 'yyyy-MM-dd'),
          info: [
            {
              key: 1,
              testName: '血清总蛋白',
              testResult: '75.9',
              unit: 'g/L',
              reference: '65--85'
            },
            {
              key: 2,
              testName: '血清白蛋白',
              testResult: '44.4',
              unit: 'g/L',
              reference: '35--55'
            },
            {
              key: 3,
              testName: '血清总胆固醇',
              testResult: '6.07',
              unit: 'mmol/L',
              reference: '0--5.2',
              error: 1
            },
            {
              key: 4,
              testName: '血清低密度脂蛋白胆固醇',
              testResult: '4.26',
              unit: 'mmol/L',
              reference: '1.5--3.37',
              error: 1
            },
            {
              key: 5,
              testName: '血清载脂蛋白B',
              testResult: '1.3',
              unit: 'g/L',
              reference: '0.6--1.1',
              error: 1
            }
          ]
        })
      } else {
        reportList.value.unshift({
          key: 1,
          num: '1',
          name: '颈动脉彩超',
          out: true,
          date: formatDate(new Date().getTime(), 'yyyy-MM-dd'),
          detail: {
            forward:
              '双侧颈总动脉、颈内动脉、颈外动脉内径正常，管径对称，内-中膜毛糙，右侧颈总动脉分叉处见一低回声斑块，大小约6.9mm*2.1mm，斑块处血流通畅。',
            result: '右侧颈总动脉分叉处斑块形成'
          }
        })
      }
    }
  })
}

const toDetail = (item) => {
  let detail = {
    forward: item.examDesc,
    result: item.reference
  }
  if (type.value == 'inspect') {
    item.testRecordDetailList.forEach((item: any) => {
      item.testName = item.testItemName
      item.testResult = item.quantitative + item.qualitative
    })
  }
  store.commit('SET_REPORTINFO', type.value == 'inspect' ? item.testRecordDetailList : detail)
  uni.navigateTo({
    url:
      '/packA/pages/report/detail?type=' +
      type.value +
      '&name=' +
      (type.value == 'inspect' ? item.testTypeName : item.examItemName) +
      '&date=' +
      item.reportTime
  })
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f6f7fe;
  overflow: hidden;
  .img_bg {
    position: absolute;
    width: 100%;
    height: 396rpx;
    top: 0;
    left: 0;
  }
  .patient {
    padding: 32rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    .name {
      font-weight: 500;
      font-size: 40rpx;
      color: #222222;
    }
    .num {
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      padding: 0 24rpx;
      background: #ffffff;
      border-radius: 4rpx;
      font-weight: 400;
      font-size: 24rpx;
      box-sizing: border-box;
      color: #666666;
      margin-left: 32rpx;
    }
    .upload_btn {
      width: 192rpx;
      height: 56rpx;
      line-height: 56rpx;
      box-sizing: border-box;
      // background: rgba(97,93,233,0.1);
      border: 2rpx solid #00d1b6;
      border-radius: 28rpx;
      font-weight: bold;
      font-size: 24rpx;
      margin: 0;
      color: #00d1b6;
      text-align: center;
    }
  }
  .content {
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    position: relative;
    z-index: 10;
    .tabs {
      height: 84rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 64rpx;
      padding: 30rpx;
      .tab {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }
      .active {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        font-size: 36rpx;
        color: #222222;
        position: relative;
      }
      .active::after {
        content: '';
        display: block;
        width: 24rpx;
        height: 6rpx;
        background: #00d1b6;
        border-radius: 4rpx;
        position: absolute;
        left: calc(50% - 12rpx);
        bottom: -24rpx;
      }
    }
    .list {
      padding: 0 30rpx;
      background: #fff;
      min-height: calc(100vh - 220rpx);
      .item {
        background: #fafafa;
        border-radius: 12rpx;
        border: 1rpx solid #e5e6eb;
        margin-top: 24rpx;
        display: flex;
        justify-content: flex-start;
        padding: 32rpx;
        align-items: center;
        .img_avatar {
          width: 88rpx;
          height: 88rpx;
          margin-right: 24rpx;
        }
        .info {
          width: 526rpx;
          position: relative;
          .name {
            display: flex;
            justify-content: space-between;
            .name_text {
              font-weight: 600;
              font-size: 32rpx;
              color: #222222;
            }
            .tag {
              width: 80rpx;
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              display: inline-block;
              background: #00d1b6;
              border-radius: 4rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #ffffff;
            }
          }
          .date {
            display: flex;
            justify-content: space-between;
            margin-top: 16rpx;
            .date_text {
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
            }
          }
          .img_more {
            width: 38rpx;
            height: 38rpx;
            position: absolute;
            top: 24rpx;
            right: 0;
          }
        }
      }
    }
    .nodate {
      text-align: center;
      height: calc(100vh - 220rpx);
      .img {
        display: inline-block;
        width: 320rpx;
        height: 240rpx;
        margin-top: 240rpx;
      }
      .nodate_text {
        .name {
          display: block;
          font-size: 28rpx;
          color: #666;
          text-align: center;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
